<div class="content">
    <!-- 周数据： -->
    <div class="choose">
        <div class="h3">周數據</div>

        <div style="flex-direction: row;flex-wrap: wrap;display: flex;">
            <div class="input_first" style="margin-left: 40px;padding-left:32px;float:right">
                <div class="titlew">年/月：</div>
                <nz-month-picker [(ngModel)]="month1" [nzAllowClear]=false nzFormat="yyyy/MM" (ngModelChange)="TimeChange1($event)"></nz-month-picker>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlew">周：</div>
                <nz-select [nzAllowClear]=false [(ngModel)]="week">
                    <!-- <nz-option *ngFor="let item of Arr" [nzLabel]=item [nzValue]=item></nz-option> -->
                    <nz-option nzValue="1" nzLabel="第一周"></nz-option>
                    <nz-option nzValue="2" nzLabel="第二周"></nz-option>
                    <nz-option nzValue="3" nzLabel="第三周"></nz-option>
                    <nz-option nzValue="4" nzLabel="第四周"></nz-option>
                </nz-select>
            </div>
        </div>
        <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 20px;">
            <div class="input_first" style="margin-left: 40px;padding-left:32px;">
                <div class="titlew">DL時數：</div>
                <input type="text" value='' name='dlhours' [(ngModel)]='dlhours'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlew">IDL時數：</div>
                <input type="text" name='' [(ngModel)]='idlhours'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlew">其他：</div>
                <input type="text" name='' [(ngModel)]='other'>
            </div>
        </div>

        <!-- 分割线 -->
        <div class="wrap"></div>

        <!-- 按钮 -->
        <div style="width: 100%;display: flex;padding:15px 0 ;">
            <div style="margin:-3px auto;height: 30px;">
                <!-- 清除按钮 -->
                <button class="clear" (click)="clear1()"></button>
                <!-- 保存按钮 -->
                <button class="save" (click)="save1()"></button>
            </div>
        </div>
    </div>

    <div class="wrap2"></div>

    <!-- 月数据： -->
    <div class="choose">
        <div class="h3">月數據</div>

        <div style="flex-direction: row;flex-wrap: wrap;display: flex;">
            <div class="input_first" style="margin-left: 40px;padding-left:32px;">
                <div class="titlem">年/月：</div>
                <nz-month-picker [(ngModel)]="month2" [nzAllowClear]=false nzFormat="yyyy/MM" (ngModelChange)="TimeChange2($event)">
                </nz-month-picker>
            </div>
        </div>

        <!-- DL -->
        <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 20px;">
            <div class="input_first" style="margin-left: 40px;padding-left:32px;">
                <div class="titlem">DL人數：</div>
                <input type="text" value='' name='' [(ngModel)]='dlperson'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlem">DL人力費用：</div>
                <input type="text" name='' [(ngModel)]='dlhumancost'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlem">DL加班費用：</div>
                <input type="text" name='' [(ngModel)]='dlovertime'>&nbsp;/小時
            </div>
        </div>
        <!-- IDL -->
        <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 20px;">
            <div class="input_first" style="margin-left: 40px;padding-left:32px;">
                <div class="titlem">IDL人數：</div>
                <input type="text" value='' name='' [(ngModel)]='idlperson'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlem">IDL人力費用：</div>
                <input type="text" name='' [(ngModel)]='idlhumancost'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlem">IDL加班費用：</div>
                <input type="text" name='' [(ngModel)]='idlovertime'>&nbsp;/小時
            </div>
        </div>
        <!-- 其他 -->
        <div style="flex-direction: row;flex-wrap: wrap;display: flex;margin-top: 20px;">
            <div class="input_first" style="margin-left: 40px;padding-left:32px;">
                <div class="titlem">設備折舊：</div>
                <input type="text" value='' name='' [(ngModel)]='depreciation'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlem">廠房租金：</div>
                <input type="text" name='' [(ngModel)]='rent'>
            </div>
            <div class="input_first" style="margin-left: 0px;">
                <div class="titlem">水電費：</div>
                <input type="text" name='' [(ngModel)]='sdcharge'>
            </div>
        </div>

        <!-- 分割线 -->
        <div class="wrap"></div>
        <!-- 按钮 -->
        <div style="width: 100%;display: flex;padding:15px 0 ;">
            <div style="margin:-3px auto;height: 30px;">
                <!-- 清除按钮 -->
                <button class="clear" (click)="clear2()"></button>
                <!-- 保存按钮 -->
                <button class="save" (click)="save2()"></button>
            </div>
        </div>
    </div>

    <div class="wrap2"></div>

    <!-- table -->
    <div class="table">
        <nz-table #headerTable [nzShowPagination]=false nzSize="middle" [nzData]="listOfData" [nzScroll]="{ x: '1400px', y: '235px' }">
            <thead>
                <tr>
                    <!-- <th>年份</th> -->
                    <th nzWidth="100px">年/月</th>
                    <th nzWidth="80px">周數</th>
                    <th nzWidth="110px">DL時數</th>
                    <th nzWidth="110px">IDL時數</th>
                    <th nzWidth="110px">其他</th>
                    <th nzWidth="110px">DL人數</th>
                    <th nzWidth="130px">DL人力費用</th>
                    <th nzWidth="130px">DL加班費用</th>
                    <th nzWidth="110px">IDL人數</th>
                    <th nzWidth="140px">IDL人力費用</th>
                    <th nzWidth="140px">IDL加班費用</th>
                    <th nzWidth="110px">設備折舊</th>
                    <th nzWidth="110px">廠房租金</th>
                    <th nzWidth="100px">水電費</th>
                </tr>
            </thead>
            <tbody>
                <tr class="tr_hover" *ngFor="let data of listOfData,let Key = index" (click)="edit(data)">
                    <td>{{data.month}}</td>
                    <td>{{data.week}}</td>
                    <td>{{data.data[0]['value']}}</td>
                    <td>{{data.data[1]['value']}}</td>
                    <td>{{data.data[2]['value']}}</td>
                    <td>{{data.data[3]['value']}}</td>
                    <td>{{data.data[4]['value']}}</td>
                    <td>{{data.data[5]['value']}}</td>
                    <td>{{data.data[6]['value']}}</td>
                    <td>{{data.data[7]['value']}}</td>
                    <td>{{data.data[8]['value']}}</td>
                    <td>{{data.data[9]['value']}}</td>
                    <td>{{data.data[10]['value']}}</td>
                    <td>{{data.data[11]['value']}}</td>
                </tr>
            </tbody>
        </nz-table>
    </div>


</div>
